import { reactive,watch } from 'vue'

// 使用reactive在外面可以直接访问，如UserState.loginUser、UserState.setUserInfo
// 使用ref则在外面访问时需要加.value，如UserState.value.loginUser（在<template>中除外）
export const UserState = reactive({

    // 初始化值从内存中取，防止页面刷新后的丢失
    loginUser: JSON.parse(sessionStorage.getItem('loginUser')) || {},

    unreadCount: 0,

    setUserInfo(user){
        this.loginUser = user
        window.sessionStorage.setItem('loginUser', JSON.stringify(user))
    },

    setUnreadCount(count){
        this.unreadCount = count
    },

    unreadCountIncrease(){
        this.unreadCount++
    }
})


watch(() => UserState.loginUser, newVal => {
    sessionStorage.setItem('loginUser', JSON.stringify(newVal))
}, {deep : true}) // deep: true 用来监听嵌套对象的变化